/**
 * 页面：首页（Home）
 * 功能：展示 AI 工具入口、宣传 Banner、精选模版与最近作品
 * 交互：支持跳转到 3D 展馆页面
 */
import React from 'react'
import './Home.css'
import { Row, Col, Card, Tag, Button } from 'antd'
import { useNavigate } from 'react-router-dom'

function Index() {
  const nav=useNavigate()
  const tools = [
    { icon: 'A', title: '文字 -> 视频', desc: 'AI写稿 创作更轻松' },
    { icon: 'P', title: 'PPT -> 视频', desc: '告别低效讲解 让内容生动' },
    { icon: '3D', title: '个性化3D形象', desc: '定制模型/姿态/声音等' },
  ]

  const featured = [
    { title: '苏绣的数字化展示与传承', desc: '以非遗为主题，适合文化讲解/展馆导览。' },
    { title: '云平台使用录屏讲解', desc: '快速制作产品操作演示，便于内部培训。' },
    { title: '小学科学观察荷花', desc: '面向K12课程内容的自然科普模板。' },
    { title: '企业文化培训', desc: '适用于入职培训与价值观宣导。' },
  ]

  const recent = [
    { title: '一分钟快速上手告白到达', desc: '演示从脚本到成片的极速流程。' },
  ]

  return (
    <div className="home">
      <section className="tools">
        <div className="section-title">AI工具</div>
        <Row gutter={[16, 16]}>
          {tools.map((t) => (
            <Col xs={24} sm={12} md={8} key={t.title}>
              <Card hoverable>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div className="tool-icon">{t.icon}</div>
                  <div className="tool-info">
                    <div className="tool-title">{t.title}</div>
                    <div className="tool-desc">{t.desc}</div>
                  </div>
                </div>
              </Card>
            </Col>
          ))}
        </Row>
      </section>

      <section className="banner">
        <div className="banner-inner">
          <div className="banner-text">VR虚拟空间</div>
          <button className="banner-btn" onClick={()=>nav('/mode')}>我要试试</button>
        </div>
      </section>

      <section className="featured">
        <div className="section-header">
          <div className="section-title">精选模版</div>
          <div className="section-actions">
            <Tag color="#f0f5ff" style={{ color: '#2f54eb', borderColor: '#adc6ff' }}>横屏</Tag>
            <Tag>竖屏</Tag>
            <Button type="link" className="more">更多 ›</Button>
          </div>
        </div>
        <Row gutter={[16, 16]}>
          {featured.map((f) => (
            <Col xs={24} sm={12} md={12} lg={6} key={f.title}>
              <Card hoverable bodyStyle={{ textAlign: 'center' }}>
                <div className="card-title">{f.title}</div>
                {f.desc && (
                  <div style={{ fontSize: 12, color: '#86909c', marginTop: 4 }}>{f.desc}</div>
                )}
                {Array.isArray(f.tags) && f.tags.length > 0 && (
                  <div style={{ marginTop: 8, display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
                    {f.tags.map((t) => (
                      <Tag key={t}>{t}</Tag>
                    ))}
                  </div>
                )}
              </Card>
            </Col>
          ))}
        </Row>
      </section>

      <section className="recent">
        <div className="section-header">
          <div className="section-title">最近作品</div>
          <Button type="link" className="more">更多 ›</Button>
        </div>
        <Row gutter={[16, 16]}>
          {recent.map((r) => (
            <Col xs={24} key={r.title}>
              <Card hoverable bodyStyle={{ textAlign: 'center' }}>
                <div className="card-title">{r.title}</div>
                {r.desc && (
                  <div style={{ fontSize: 12, color: '#86909c', marginTop: 4 }}>{r.desc}</div>
                )}
                {Array.isArray(r.tags) && r.tags.length > 0 && (
                  <div style={{ marginTop: 8, display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
                    {r.tags.map((t) => (
                      <Tag key={t}>{t}</Tag>
                    ))}
                  </div>
                )}
              </Card>
            </Col>
          ))}
        </Row>
      </section>
    </div>
  )
}

export default Index

